<template>

    <swiper :options="swiperOption">
        <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liimg">
            <img :src="slide.src">
        </swiper-slide>
        <p class="swiper-pagination" slot="pagination"></p>
    </swiper>


</template>

<script>
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default {
    data() {
        return {
            swiperOption: {
                autoplay: true,
                pagination: {
                    el: '.swiper-pagination'
                }
            },
            swiperSlides: [{ id: 1, src: 'https://m15.360buyimg.com/mobilecms/jfs/t1/73168/3/21168/119017/62cd0abeE227f2baa/33d631630e87d860.jpg!cr_1125x449_0_166!q70.jpg' }, { id: 2, src: 'https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/75570/1/17836/107887/633429caE3c0375df/9caf9778d4615104.jpg!cr_1053x420_4_0!q70.jpg' }, { id: 3, src: 'https://m15.360buyimg.com/mobilecms/jfs/t1/46544/27/20208/61815/62c02d32Efdae5032/2669eddf1a027dd0.jpg!cr_1125x449_0_166!q70.jpg' }, { id: 4, src: 'https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/94250/10/20205/134572/61db8ae7E876ca280/5be713e26eb02641.jpg!cr_1053x420_4_0!q70.jpg' }, { id: 5, src: 'https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/212225/6/11238/61871/61e50ff9E7f02c060/8d0f3065b0c27182.jpg!cr_1053x420_4_0!q70.jpg' }]
        }

    },
    components: {
        swiper,
        swiperSlide,
    }
}
</script>

<style lang="less">
.liimg {
    width: 96vw;
    height: 300px;
    border-radius: 20px;
    overflow: hidden;
    img {
        width:95vw;
        height: 100%;
    border-radius: 20px;
    }
}
</style>
